import React, { useState, useEffect } from 'react';
import Export from './export'
// import CodeLabel from '../../../../components/CodeLabel';
import storage from '../../../../utils/storage';
import services from '../../../../services/api';
import { APIUrl } from '../../../../services/createServices';
import {Tooltip,message} from 'antd';
export default function(props) {
  const [list, setList] = useState([]);
  const [remarks, setRemark] = useState([]);
  const [exportData, setExportData] = useState({})
  useEffect(() => {
    //   if (!storage.strategyExport || (storage.strategyExport && storage.strategyExport.length === 0)) {
    //     message.warning('请到组件列表选择需要导出组件');
    //     return;
    //   }
    //   setList(storage.strategyExport);
    getExportData(storage.strategyExportMsg)
      return () => {
        storage.strategyExportMsg = {}; // 注销组件时，清空storage.strategyExport
      };
  }, []);
  // 下载数据
  function exportFn(params) {
    const urls = `${APIUrl}/strategy-component/export-handle?event_id=${params.event_id}&strategy_ids=${params.strategy_ids}`
    window.open(urls, '_black');
  }
  // 请求数据
  function getExportData(value) {
    const params = {
        strategy_ids: value.selectedRowKeys.join(),
        event_id: value.currentEventId.toString()
    }
    setExportData(params)
    services.strategyComponent.export(params).then(res => {
       if (!res.code) {
         setList(res.data.component)
         setRemark(res.data.remarks)
       }
    }).catch(err => {
      message.error(err)
    })
  };
  const columns = [
    {
      title: '序号',
      width: 80,
      render: (text, record, index) => {
        return <>{index + 1}</>;
      }
    },
    {
      title: '组件名称',
      key: 'strategy_name',
      dataIndex: 'strategy_name',
      width: 200,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      }
    },
    {
      title: '组件模式',
      key: 'strategy_mode_name',
      dataIndex: 'strategy_mode_name',
      ellipsis: true,
      width: 200,
      // render: text => {
      //   return (
      //     <Tooltip title={text} placement='topLeft'>
      //       <>
      //         <CodeLabel code='strategy_mode' value={text} />
      //       </>
      //     </Tooltip>
      //   );
      // }
    },
    {
      title: '关联事件',
      key: 'event_name',
      dataIndex: 'event_name',
      width: 200,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      }
    },
    {
      title: '所属渠道',
      key: 'app_name',
      dataIndex: 'app_name',
      width: 200,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      }
    },
    {
      title: '关联产品',
      key: 'product_name',
      dataIndex: 'product_name',
      width: 200,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text || '-'}
          </Tooltip>
        );
      }
    },
  ];
  const remarkColumns = [
    {
      title: '序号',
      width: 80,
      render: (text, record, index) => {
        return <>{index + 1}</>;
      }
    },
    {
      title: '项目',
      key: 'name',
      dataIndex: 'name',
      width: 200,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      }
    },
    {
      title: '描述',
      key: 'param',
      dataIndex: 'param',
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text || '-'}
          </Tooltip>
        );
      }
    },
  ]
  return (
    <Export
      columns={columns}
      data={list}
      remarks={remarks}
      remarkColumns={remarkColumns}
      exportParams={exportData}
      exportPage={exportFn}
      actionType={'strategyComponent'}
    >
    </Export>
   )
}